<template>
  <div>
    <div class="staffSkills zy-content">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
          <div>
            <p class="label">{{$t('工站')}}</p>
            <div class="ipt">
              <Cascader clearable :data="orgList" v-model="paramsList.basicOrganizationCode"
                  :placeholder="`${$t('common.selectInfo')}`" change-on-select>
              </Cascader>
            </div>
          </div>
        </Col>
          <Col span="4">
          <p class="label">{{ $t('员工工号/姓名') }}</p>
          <div class="ipt">
            <Select  v-model="paramsList.employeeId" filterable clearable :placeholder="`${$t('common.selectInfo')}`" @on-query-change="timeOutgetUserNo">
                <Option v-for="(item,index) of userNoArr" :value="item.id" :key="index" :label="item.empno+'-'+item.realname"></Option>
            </Select>
          </div>
          </Col>
          <Col span="4">
          <p class="label">{{ $t('类型') }}</p>
          <div class="ipt">
            <Select v-model="paramsList.skillsTypeId" clearable :placeholder="`${$t('common.selectInfo')}`"
              @on-change="setSkillDev">
              <Option v-for="(item, index) of typeList1" :value="item.id" :key="index" :label="enShowF ? item.enValue : item.value"></Option>
            </Select>
          </div>
          </Col>
          <Col span="4">
          <p class="label">{{ $t('设备') }}</p>
          <div class="ipt">
            <Select v-model="paramsList.skillsDeviceId" :disabled="formItem.skillsTypeId === 43" clearable
              :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item, index) of typeList2" :value="item.id" :key="index" :label="enShowF ? item.enValue : item.value"></Option>
            </Select>
          </div>
          </Col>
          <Col span="4">
          <p class="label">{{ $t('技能') }}</p>
          <div class="ipt">
            <Select v-model="paramsList.skillId" clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item, index) of typeList3" :value="item.id" :key="index" :label="enShowF ? item.enValue : item.value"></Option>
            </Select>
          </div>
          </Col>
          <Col span="4">
          <p class="label">{{ $t('资质证书') }}</p>
          <div class="ipt">
            <Select v-model="paramsList.certification" clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item, index) of statusArr" :value="item.id" :key="index" :label="item.name"></Option>
            </Select>
          </div>
          </Col>
          <Col span="24" align="center">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button class="search-btn"
                      type="primary"
                      v-has="'skillMatrixSearch'"
                      @click="changeNum()">{{ $t("common.Query") }}</Button>
              <Button class="reset-btn" v-has="'skillMatrixSearch'" @click="changeNum1()">{{ $t("common.reset") }}
              </Button>
            </div>
          </div>
          </Col>
        </Row>
      </div>
      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">{{ $t('员工技能矩阵') }}</span>
          <Button @click="editRow" v-has="'skillMatrixNew'">{{ $t("common.New") }}</Button>
        </div>
        <div class="tableContent1">
          <Table ellipsis ref="selection" :columns="columns" :data="dataArr" border>
          </Table>
        </div>
        <div class="pageWrap mt16">
          <div class="remark">
            <P>{{ $t('员工技能矩阵备注1') }}</P>
            <P>{{ $t('员工技能矩阵备注2') }}</P>
            <P>{{ $t('员工技能矩阵备注3') }}</P>
            <P>{{ $t('员工技能矩阵备注4') }}</P>
            <P>{{ $t('员工技能矩阵备注5') }}</P>
            <P>{{ $t('员工技能矩阵备注6') }}</P>
          </div>
          <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
            @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
        </div>
      </div>
    </div>
    <addModal @change="addModalChange" :createStatusF="createStatus" :editDataF="editData" :addtitleF="addtitle" v-if="createStatus"
      @cancle="cancle"></addModal>
    <iframeModalCompent v-if="iframeShow" :isStudy="false" :iframeShow="iframeShow" :iframeModalSrc="iframeModalSrc"
        @closeIframe="iframeShow = false"></iframeModalCompent>
  </div>
</template>

<script>
import addModal from "./modal/addModal";
import recursion from '../../../util/recursion'
import { findOrgByLevel } from "@/api/index.js";
import iframeModalCompent from "../../knowledgeBase/modal/iframe.vue";
export default {
  name: "staffSkills",
  components: { addModal,iframeModalCompent },
  data() {
    return {
      formItem: {},
      iframeShow:false,
      iframeModalSrc:'',
      addtitle: "",
      createStatus: false,
      pageSizeOption: [10, 20, 30],
      paramsList: {

      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      columns: [],
      dataArr: [],
      data1: {},
      editData: [],
      companyList: [],
      typeList1: [],
      typeList2: [],
      typeList3: [],
      userNoArr:[],
      orgList: [],
      statusArr:[
        {id:0,name:`${this.$t('common.All')}`},
        {id:1,name:`${this.$t('common.Yes')}`},
        {id:2,name:`${this.$t('common.No')}`}
      ],
      enShowF:false,

    };
  },
  mounted() {
    if(window.localStorage.getItem('language') ==='en_US'){
        this.enShowF = true
    }else{
        this.enShowF = false
    }
    this.changeNum();
    this.getSkills();
    this.getOrgList()
  },
  methods: {
    getOrgList() {
      this.axios({
        method: 'get',
        url: '/basic/organization/findListByToken',
        params: {}
      }).then(res => {
        if (res.code === 200) {
          const obj = {
            label: 'name',
            value: 'code',
            children: 'children'
          }
          this.orgList = recursion.convertTree(res.data, obj)
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    //延时查询
    timeOutgetUserNo(query){
            clearTimeout(this.timeout);
            let isSearchF =false;
            this.timeout = setTimeout(() => {
                if(query !=""){
                    for(let item of this.userNoArr){
                        if(item.empno==query||item.empno+'-'+item.realname==query||item.realname==query){
                            isSearchF = true
                        }
                    }
                    if(isSearchF==false){
                        this.getUserNo(query);
                    }
                }
            }, 500);
        },
        getUserNo(query){
            this.axios({
                method: 'get',
                url: '/basic/user/searchUser',
                params: {
                    key:query
                }
            }).then(res => {
                if(res.code === 200){
                    this.userNoArr = res.data
                }else{
                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
    getSkills() {
      this.axios({
        method: "post",
        url: "/dms/dmsEmployeeSkillMatrix/queryDict",
        data: {
          names: "技能类型,设备类型,技能",
        },
      }).then((res) => {
        if (res.code === 200) {
          if (res.data && res.data.length > 0) {
            for (let item of res.data) {
              if (item.name === "技能类型") {
                this.typeList1.push(item);
              }
              if (item.name === "设备类型") {
                this.typeList2.push(item);
              }
              if (item.name === "技能") {
                this.typeList3.push(item);
              }
            }
          }
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getCompanyList() {
      findOrgByLevel({ level: 3 }).then((res) => {
        if (res.code === 200) {
          this.companyList = res.data;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    editRow(row) {
      if (row.id) {
        this.addtitle = this.$t('common.Edit');
        this.editData = this.data1[row.id];
      } else {
        this.editData = [];
        this.addtitle = this.$t('新增');
      }
      this.createStatus = true;
    },
    cancle(status) {
      this.createStatus = false;
      if (status) {
        this.searchList();
      }
    },
    addModalChange(){
      this.searchList();
    },
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changeNum1() {
      this.pageNum = 1;
      this.paramsList = {}
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    searchList() {
      let data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      for (let key in this.paramsList) {
        if (this.paramsList[key]) {
          this.$set(data, key, this.paramsList[key])
        }
      }
      data.basicOrganizationCode = (Array.isArray(this.paramsList.basicOrganizationCode) && this.paramsList.basicOrganizationCode.length > 0) ? this.paramsList.basicOrganizationCode.at(-1):""

      if(data.certification===1){
        data.certification = true
      }
      if(data.certification===2){
        data.certification = false
      }
      this.axios({
        method: "post",
        url: "/dms/dmsEmployeeSkillMatrix/queryPage",
        data,
      }).then((res) => {
        if (res.code === 200) {
          if(!res.data.page){
            this.total = 0
            this.data1 = []
            this.columns = []
            return
          }
          this.total = res.data.page.total;
          this.data1 = res.data.data;
          this.columns = this.getColTree(res.data.column);
          this.columns.unshift({
            title: this.$t('类型复数'),
            key: "Types",
            align: "center",
            minWidth: 200,
            children: [
              {
                title: this.$t('设备复数'),
                key: "Devices",
                align: "center",
                minWidth: 200,
                children: [
                  {
                    title: this.$t('技能复数'),
                    key: "empname",
                    align: "center",
                    minWidth: 200,
                    render: (h, params) => {
                      return h(
                        "a",
                        {
                          on: {
                            click: () => {
                              this.editRow(params.row);
                            },
                          },
                        },
                        params.row.empname
                      );
                    },
                  },
                ],
              },
            ],
          });
          let arr = [];
          let obj = res.data.data;
          for (let i = 0; i < Object.keys(obj).length; i++) {
            arr.push({
              id: Object.keys(obj)[i],
              value: obj[Object.keys(obj)[i]],
            });
          }
          arr.forEach((item) => {
            item.value.forEach((item1) => {
              item[
                `${item1.skillsTypeName}${item1.skillsDeviceName}${item1.skillName}`
              ] = {
                levelId: item1.levelId,
                certification: item1.certification,
                filePath:item1.files.length>0?item1.files[0].filePath:''
              };
              item[`empname`] = item1.employeeName;
            });
          });
          this.dataArr = arr;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getColTree(arr) {
      arr.forEach((item) => {
        item["title"] = item.skillsTypeId;
        item["key"] = item.skillsTypeId;
        item["align"] = "center";
        item["minWidth"] = 200;
        if (item.skillsDeviceList.length > 0) {
          item.skillsDeviceList.forEach((item1) => {
            item1["title"] = item1.skillsDeviceId;
            item1["key"] = item1.skillsDeviceId;
            item1["align"] = "center";
            item1["minWidth"] = 200;
            if (item1.skillList.length > 0) {
              item1.skillList.forEach((item2) => {
                item2["title"] = item2.skillId;
                item2["key"] =
                  item.skillsTypeId + item1.skillsDeviceId + item2.skillId; //拼起来
                item2["align"] = "center";
                item2["minWidth"] = 200;
              });
              item1.children = item1.skillList.map((item2) => {
                return {
                  ...item2,
                  render: (h, params) => {
                    const key = item.skillsTypeId + item1.skillsDeviceId + item2.skillId;
                    if (params.row[key]) {
                      return h("div", [
                        h(
                          "span",
                          {
                            style: {
                              display: "inline-block",
                              height: "22px",
                              width: "22px",
                              "border-radius": "11px",
                              border: "1px solid",
                            },
                            on: {},
                          },
                          params.row[key].levelId
                        ),
                        h(
                          "a",
                          { style: { "font-size": "18px" },
                          on: {
                            click: () => {
                              this.iframeClick(params.row[key].filePath)
                            }
                          }, },
                          params.row[key].certification &&  params.row[key].filePath ? "💮" : ''

                        ),
                      ]);
                    } else {
                      return h("div", [h("span", {}, "")]);
                    }
                  },
                };
              });
            }
          });
          item.children = item.skillsDeviceList;
        }
      });
      return arr;
    },
    iframeClick(item){
      this.iframeShow = true
      let env = process.env.NODE_ENV;
      let origin = window.location.origin;
      let path = '/kakone';
      if (env === 'tong') {
        path = '';
      }
      let fileUrl = origin + this.util.filePathToUrl(item)
      this.iframeModalSrc = origin + path + `/fileServer/onlinePreview?url=${fileUrl}`
      console.log(this.iframeModalSrc)
    },
  },
};
</script>
<style scoped lang="scss">
.staffSkills{
  .pageWrap{
    position: relative;
    height: 120px;
    .remark{
      position: absolute;
      left: 0;
      text-align: left;
    }
  }
}
</style>
